<template>
  <div>
    <h1>订单支付</h1>
    <div class="order">

      <div class="money">
        <el-image class="image" :src="require('@/assets/img.png')"></el-image>
        <div class="ceil">
          <span>{{ planeData.totalFee }}元</span>
          <span>单号:{{ planeData.orderNo }}</span>
        </div>
      </div>
      <br/>
      <span style="color: red;font-weight: bold;font-size: 20px">非常抱歉！目前仅支持通过支付宝消费</span>
      <br/>
      <div class="type">
        <el-image :src="require('@/assets/zfb.png')" style="width: 40px;height: 40px"></el-image>
        <span>支付宝</span>
        <el-radio-group v-model="radio1">
          <el-radio-button disabled label="支付宝"></el-radio-button>
          <el-radio-button disabled label="微信"></el-radio-button>
        </el-radio-group>
        <span>微信支付</span>
        <el-image :src="require('@/assets/wx.png')" style="width: 45px;height: 45px"></el-image>
      </div>
      <br/>
      <span style="color: #1b96db;font-weight: bold;">当前消费方式:&nbsp;&nbsp;&nbsp;{{ this.radio1 }}</span>
      <el-button class="button" @click="pay()">付款</el-button>
    </div>
  </div>
</template>

<script>
import order from "../../api/order"

export default {
  props: {
    planeData: {
      type: Object
    }
  },
  name: "money",
  data() {
    return {
      radio1: '支付宝',
    }
  },
  created() {
    console.log(this.planeData)
    this.aa = this.planeData

  },
  methods: {
    async pay() {
      const zfb = await order.zfb(
        this.planeData.orderNo, //订单号
        this.planeData.planeId + "——" + this.planeData.startCity + "——" + this.planeData.endCity, //商品显示出发地——目的地
        this.planeData.totalFee,  //金额
        this.planeData.startAirport, //商品描述
      )
        .then(
          async response => {

          //这里是跳转新的页面
          document.querySelector('body').innerHTML = response;
          const div = document.createElement('div');
          div.innerHTML = response.data;
          document.body.appendChild(div);

          // _blank -- 在新窗口中打开链接
          // _parent -- 在父窗体中打开链接
          // _self -- 在当前窗体打开链接,此为默认值
          // _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

          document.forms[0].setAttribute('target', '_top');// 新建窗口页面
          document.forms[0].submit();
          //支付宝支付成功后订单页支付成功
          await order.paymentOrRefund(this.planeData)

        })//请求到了支付宝并支付成功了

    },
  }


}
</script>


<style scoped>
.order {
  height: 400px;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

}

.time {
  display: flex;
  flex-direction: column;
  align-items: center;


}

.money {
  width: 400px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;

}

.image {
  padding-right: 15px;

}

.ceil {
  font-size: larger;
  font-weight: bolder;
  display: flex;
  flex-direction: column;
  align-items: baseline;
}


.type {
  width: 400px;
  display: flex;
  align-items: center;

  justify-content: space-around;

  border-radius: 10px;
}

.button {
  margin-top: 50px;
}
</style>
